﻿/**
 *作者：gleams
 *日期： 2014 年 4 月 10 日
 * web:  http://www.gleamweb.net
 *幻灯片函数式调用
 *整理完成后的函数式调用
 *ele 为需要添加效果的滚动框架的容器，定义为唯一的ID
 *options  可配参数设置
 * autoTime:自动执行时间
 * width : 宽度
 * height: 高度
**/

(function($){


  function slidePic(ele,options){
	var slidePic = $(ele)                           //$(".slidePic")修改为需要添加效果的ele元素
	,slideArrow = null               //箭头 ，这里的值需要在html追加到slidePic后获取值
	,slideStatus = null             //状态  这里的值需要在html追加到slidePic后获取值
	,picList = null                 //这里的值需要在html追加到slidePic后获取值
	,timer = undefined;            //图片列表
	
	var options = options || {}              //获取参数设置对象，如果不存在就新建一个
		,autoTime = options.autoTime !== undefined ? options.autoTime : 6000 //接收 autoTime 设置，可能会想为什么这里不使用上页面的方式呢？因为autoTime要设置为0的情况，用上面的方式就会有问题,|| 为或，0时值为false 
		,width = options.width || 980
		,height = options.height || 600;
		
	//html部分
	slidePic.addClass("slidePic");
	slidePic.find("ul").addClass("picList");
	slidePic.append('<div class="slideArrow"><span class="prev"></span><span class="next"></span></div>'); 
	var slideStatusHtml = $('<div class="slideStatus"><ul class="status"></ul></div>')
		,statusLi = "";
		
	//根据li的个数生成状态圆点的个数
	slidePic.find("ul li").each(function(k,v){
		if(k === 0){
			$(this).addClass("active");                //默认设置slidePic 中的 第一个li active,
			statusLi += '<li class="active"></li>';    //默认设置statusLi 中的 第一个li active
		}else{
			statusLi +='<li></li>';
		}
	});
	
	slideStatusHtml.find(".status").html(statusLi);
	
	slidePic.append(slideStatusHtml);
	slideArrow = slidePic.find(".slideArrow");
	slideStatus = slidePic.find(".slideStatus");
	picList = slidePic.find(".picList");
	
	
		
	slidePic.css({width:width,height:height});//设置容器的大小
	
	slideStatus.find("li").bind("click",function(){
		var _index = $(this).index(),                 //获取当前点击的index,
			_picLi = picList.find("li").eq(_index);   //找到需要移动的图片
			
			slideMove($(this),_picLi,-width);      //实际数字替换为变量
			autoPlay();
	});
	
	//绑定右箭头,
	//绑定右箭头很简单，使用 trigger 
	slideArrow.find(".next").bind("click",function(){
		var _active = slideStatus.find(".active");    	//找到当前活动状态。
		
		if(_active.next().size()){
			_active.next().trigger("click");
		}else{
			slideStatus.find("li").eq(0).trigger("click");
		}
		autoPlay();
	});
	
	
	//左箭头绑定，不能直接使用trigger的方式因为没有相关的事件完成向右移动这样的效果.
	//向右移动理论上和向左移动是一样的。
	slideArrow.find(".prev").bind("click",function(){
		var _active = slideStatus.find(".active")    	//找到当前活动状态。
			,_index = 0
			,_picLi = null
			,_slideStatusLi = null
			;
		if(_active.prev().size()){
			_index = _active.prev().index();
			_picLi = picList.find("li").eq(_index);
			_slideStatusLi = slideStatus.find("li").eq(_index);
			
			slideMove(_slideStatusLi,_picLi,width)
		}else{   //如果没有else就不能无限循环了
			_index = slideStatus.find("li:last-child").index(); //得到最后一个li   
			_picLi = picList.find("li").eq(_index);
			_slideStatusLi = slideStatus.find("li").eq(_index);
			
			slideMove(_slideStatusLi,_picLi,width);//实际数字替换为变量
		}
		autoPlay()
	
	});
	
	autoPlay();//起用自动播放
	
	
	/*
	*移动图片代码
	*slideStatusLi 状态圆点
	*picLi         需要移动的li
	*moveSize      移动的大小
	*/	
	function slideMove(slideStatusLi,picLi,moveSize){
	
		$(slideStatusLi).addClass("active").siblings().removeClass("active");//设置点击的为活动状态，去掉之前的活动状态样式
				picLi.css({left:-moveSize});    //实际数字替换为变量
				
				//开始移动
				picList.animate({left:moveSize},function(){
					picLi.addClass("active");                 //设置当前点击的图为首图样式
					picLi.siblings().removeClass("active");  //取消以前的首图样式
					picList.css({left:0});                   //移动完成后还原到原始状态
					picLi.css({left:0});
				});
	}	
	
	//添加自动播放功能
/*
	定义自动播放功能
*/
	function autoPlay(){
	
		//如果timer已经存在就清楚
		if(timer !== undefined){
			clearInterval(timer);
		}
		//生成新的timer
		if(autoTime !== 0){    //如果不为0才生成timer,如果为0说明停止使用自己播放功能
			 timer = setInterval(function(){
				slideArrow.find(".next").trigger("click");
			 },autoTime);  //实际数字替换为变量
		 }
	}
}


$.fn.slidePic = function(options){
   $(this).each(function(){
		slidePic(this,options);
   });
}


})(jQuery)
